<template>
  <div class="login_box">
    <div class="font_30 pad_t_20 pad_b_20 flex_center">后台管理系统</div>
    <el-tabs type="border-card" :stretch="true">
      <el-tab-pane>
        <template #label>
          <span><i class="el-icon-date"></i> 用户登录</span>
        </template>
        <el-form
          :rules="rules"
          :model="form"
          ref="formRef"
          label-width="100px"
          label-position="right"
        >
          <el-form-item label="用户名" prop="name">
            <el-input v-model="form.name" @blur="getPassword"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input type="password" show-password v-model="form.password"></el-input>
          </el-form-item>
        </el-form>
        {{ password }}
      </el-tab-pane>
      <el-tab-pane>
        <template #label>
          <span><i class="el-icon-date"></i> 手机登录</span>
        </template>
        <el-form label-width="100px" label-position="right">
          <el-form-item label="手机号">
            <el-input v-model="form.phone"></el-input>
          </el-form-item>
          <el-form-item label="验证码" class="flex">
            <div class="flex">
              <el-input v-model="form.password"></el-input>
              <el-button class="mar_l_10" type="primary">验证码</el-button>
            </div>
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
    <div class="flex">
      <el-checkbox v-model="savePassword" label="记住密码"></el-checkbox>
      <el-button type="text">忘记密码</el-button>
    </div>
    <el-button class="login_button" type="primary" @click="login">立即登录</el-button>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref, toRefs } from 'vue'
import { ElForm } from 'element-plus'

import utils from '@/assets/js/utils'
import { useStore } from 'vuex'
export default defineComponent({
  setup() {
    const store = useStore()
    const state = reactive({
      form: {
        name: '',
        password: '',
        phone: '',
        code: ''
      },
      savePassword: '',
      rules: {
        name: [{ required: true, message: '请输入活动名称', trigger: 'blur' }],
        password: [{ required: true, message: '请输入活动名称', trigger: 'blur' }]
      }
    })

    //获取本地保存密码
    const getPassword = () => {
      if (utils.getLocalStorage('password')) {
        state.form.password = utils.getLocalStorage('password')
      }
    }
    const setPassword = () => {
      console.log(localStorage['localStorageKey'])
      utils.setLocalStorage('password', state.form.password)
    }
    //表单DOM实例
    const formRef = ref<InstanceType<typeof ElForm>>()
    //登录
    const login = () => {
      setPassword()
      formRef.value?.validate((valid) => {
        if (valid) {
          console.log('校验通过')

          store.dispatch('loginAct', { name: state.form.name, password: state.form.password })
          // hyRequest.post({
          //   url: '/users',
          //   data: {
          //     name: '123456',
          //     realname: '何大大',
          //     password: '123456',
          //     cellphone: 15900844809,
          //     departmentId: 1,
          //     roleId: 1
          //   }
          // })
          // hyRequest.post({
          //   url: '/login',
          //   data: {
          //     name: '123456',
          //     password: '123456'
          //   }
          // })
        }
      })
    }
    return {
      formRef,
      login,
      getPassword,
      ...toRefs(state)
    }
  }
})
</script>

<style lang="scss" scoped>
.login_box {
  margin: 0 auto;
  margin-top: 200px;
  width: 390px;
  height: 400px;
  .login_button {
    width: 100%;
  }
}
</style>
